<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!--搜索区域-->
      <el-row>
        <el-col :span="6">
          <el-input placeholder="请输入内容" v-model="queryinfo.query" clearable @keydown.enter.native="getUser"
                    class="input-with-select" @clear="getUser">
            <el-button slot="append" icon="el-icon-search" @click="getUser"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="openDialog">新增用户</el-button>
        </el-col>
      </el-row>
      <!--显示区域-->
      <el-row>
        <el-table :data="users" border style="width: 100%">
          <el-table-column type="index" label="序号" width="100px"></el-table-column>
          <el-table-column prop="username" label="用户名" width="200"></el-table-column>
          <el-table-column prop="password" label="用户密码" width="200"></el-table-column>
          <el-table-column prop="sign" label="用户签名"></el-table-column>
          <el-table-column label="操作" width="150px">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="openDialog(scope.row.id)">修改</el-button>
              <el-button size="mini" type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!--分页区域-->
      <el-row>
        <el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange"
                       :total="total">
        </el-pagination>
      </el-row>
    </el-card>

    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible"
               :close-on-click-modal="false" @close="close">
      <el-form :model="user" label-width="80px" ref="userRef" :rules="userRules">
        <el-form-item label="用户名称" prop="username">
          <el-input v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item label="用户签名" prop="sign">
          <el-input v-model="user.sign"></el-input>
        </el-form-item>
        <el-form-item label="用户电话" prop="mobile">
          <el-input v-model="user.mobile"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    var checkMobile = (rule, value, callback) => {
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)) {
        return callback()
      } else {
        callback(new Error('请输入合法的手机号'))
      }
    }
    return {
      // 用户列表
      users: [],
      // 查询信息
      queryinfo: {
        page: 1,
        size: 10,
        query: ''
      },
      // 总数
      total: -1,
      // 用户对象
      id: 'id',
      user: {
        username: '',
        password: '',
        sign: '',
        icon: '',
        mobile: ''
      },
      dialogTitle: '',
      // 新增dialog开关
      dialogFormVisible: false,
      // 验证规则
      userRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' }
        ],
        sign: [
          { required: false, message: '请输入密码', trigger: 'blur' }
        ],
        mobile: [
          { validator: checkMobile, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 删除用户
    deleteUser (id) {
      this.$confirm('是否删除该用户', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确认',
        cancelButtonText: '放弃'
      }).then(() => {
        this.$http.delete(`user/${id}`).then(res => {
          if (this.total % this.queryinfo.size === 1) {
            this.queryinfo.page = Math.floor(this.total / this.queryinfo.size)
            this.getUser()
          } else {
            this.getUser()
          }
          this.hite(res.data.code)
        })
      }).catch(action => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          duration: 1000
        })
      })
    },
    // 提交表单
    submitForm () {
      // 修改
      if (!isNaN(this.id)) {
        this.$http.put(`user/${this.id}`, this.user).then(res => {
          this.getUser()
          this.id = 'id'
          this.hite(res.data.code)
        })
      }
      // 添加
      else {
        this.$http.post('user', this.user).then(res => {
          this.getUser()
          this.hite(res.data.code)
        })
      }
      this.dialogFormVisible = false
    },
    // 打开dialog对话框
    openDialog (id) {
      if (!isNaN(id)) {
        this.id = id
        this.$http.get(`user/${id}`).then(res => {
          this.user = res.data.data
        })
      }
      this.dialogFormVisible = true
      this.dialogTitle = '新增用户'
    },
    // 关闭dialog对话框
    close () {
      this.$refs.userRef.resetFields()
      this.user = { username: '', password: '', sign: '', icon: '', mobile: '' }
    },
    // 页码改变
    handleCurrentChange (val) {
      this.queryinfo.page = val
      this.getUser()
    },
    // 获取用户
    getUser () {
      this.$http.get(`user/${this.queryinfo.page}/${this.queryinfo.size}`, { params:
          {
            'query': this.queryinfo.query
          }
      }).then(res => {
        this.users = res.data.data.rows
        this.total = res.data.data.total
        this.queryinfo.page = 1
      })
    },
    hite (code) {
      if (code === 10000) {
        this.$message.success({
          message: '成功',
          duration: 1000
        })
      } else {
        this.$message.error({
          message: '失败',
          duration: 1000
        })
      }
    }
  },
  created () {
    this.getUser()
  }
}
</script>

<style scoped>
</style>
